<template>
    <div>
      <div class="main-tab">
        <x-header id="header" :left-options="{backText: ''}" class="top"><span class="tit">粉丝</span></x-header>
        <div class="main">
          <group>
            <cell-box v-for=" (item, index) in fans" :key="item.id">
              <img :src="item.avatar" class="avatar">
              <span class="name">{{item.nickname}}</span>
              <!--<focus class="follow" :fengsi="fans"></focus>-->
              <div class="follow">
                <div class="focus-icon" v-if="item.isFollow === 2" @click="change(item.cid,item.toUserId)">
                  <span class="jia">+</span><span class="focus">关注</span>
                </div>
                <div class="focus-icon-do" v-if="item.isFollow === 1" @click="change(item.cid,item.toUserId)">
                  <span class="dofocus">已关注</span>
                </div>
              </div>
            </cell-box>
          </group>
        </div>
        <div class="more">没有更多了哦～</div>
      </div>
    </div>
</template>
<script>
  import focus from '../../components/follow/follow'
  import {getUserFans,editUserRelation} from '@/api/user';
  import { cookie } from 'vux'

  export default {
        name: "fans",
      components:{
          focus
      },
      data(){
          return{
            cid:65,
            fans:[]
          }
      },
    methods:{
          getUserFans(){
            // this.cid=JSON.parse(cookie.get('userInfo')).id;
            getUserFans(parseInt(this.cid)).then(res =>{
              console.log(res)
              this.fans=res.data;
            })
          },
          change(cid,toUserId){
            this.cid=cid;
            this.toUserId=toUserId;
            editUserRelation({cid:this.cid,toUserId:this.toUserId}).then(res =>{
              console.log(res)
            })
          }
    },
    created(){
          this.getUserFans();
    }
    }

</script>
<style scoped>
  .top{
    background: #AD2532;
    box-shadow: 0 0 0 0 rgba(0,0,0,0.25);
  }
  .tit{
    margin-top: 8px;
    font-family: "PingFangSC-Semibold",serif;
    font-size: 17px;
    color: #FFFFFF;
    letter-spacing: -0.41px;
    text-align: center;
  }
  .main{
    padding-top:28px;
  }
  .follow{
    position: absolute;
    right: 4%;
  }
  .avatar{
    width: 3.57rem;
    height: 3.57rem;
    border: 1px solid #F4F4F4;
    border-radius:50%; overflow:hidden;
  }
  .name{
    font-family: "PingFangSC-Semibold",serif;
    font-size: 17px;
    color: #030303;
    letter-spacing: -0.41px;
    text-align: center;
    margin-left: 1.08rem;
  }
  .more{
    position: absolute;
    left: 50%;
    margin-left: -3.43rem;
    margin-top: 1.07rem;
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
  }
  .focus-icon{
    width: 3.93rem;
    height: 1.93rem;
    border: 1px solid #AD2532;
    border-radius: 0.285rem;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  .focus-icon-do{
    width: 3.93rem;
    height: 1.93rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #9B9B9B;
    border-radius: 0.285rem;
  }
  .focus{
    font-size: 12px;
    color: #AD2532;
    letter-spacing: -0.29px;
    text-align: justify;
  }
  .dofocus{
    font-size: 12px;
    color: #848484;
    letter-spacing: -0.29px;
    text-align: justify;
  }
  .jia{
    font-size: 20px;
    color: #AD2532;
    text-align: justify;
    display: block;
    height: .22rem;
    line-height: .1rem;
  }
</style>
